<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 BroadcastChannel 的案例</title>
</head>

<body>
    <div class="main">
        <h1>解释</h1>
        <ol>
            <li>
                BroadcastChannel 创建：worker.js 和 index.html 都创建了一个 BroadcastChannel 实例，并指定相同的通道名称
                'timer_channel'，这样它们可以共享同一个通信通道。
            </li>
            <li>
                Worker 的消息监听：worker.js 中监听 channel.onmessage 来接收主页面的消息，并根据消息内容进行相应处理。
            </li>
            <li>
                主页面的消息监听：index.html 中的 channel.onmessage 用来接收 Worker 发送的消息，并显示在页面上。
            </li>
            <li>
                主页面发送消息：页面上的 “开始计时器” 和 “停止计时器” 按钮通过 channel.postMessage 发送消息到 worker.js 中的 Worker。
            </li>
        </ol>
        <p>
            这样实现了主页面和 Worker 线程之间的双向通信，并通过 BroadcastChannel 使多个页面和 Worker 能够方便地共享消息。
        </p>

         <br>
         <button onclick="startTimer()">开始计时</button>   
         <button onclick="stopTimer()">停止计时</button>   
         <p id="message"></p>

    </div>
    <script src="./main.js"></script>
</body>

</html>